"use client";

import { ColumnDef } from "@tanstack/react-table";
import { DataTable } from "./../../../components/DataTable/index";
import {
  Badge,
  Book,
  Eye,
  ImageIcon,
  Pen,
  Plus,
  RotateCw,
  Search,
  TypeIcon,
} from "lucide-react";
import { useSetState } from "ahooks";
import { defaultPageIndex, defaultPageSize } from "@/utils";
import { getBlogList } from "@/modules/blog/api";
import { Button } from "@/components/ui/button";
import { useRouter } from "nextjs-toploader/app";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { isUndefined } from "lodash-es";
import { cn } from "@/lib/utils";
import {
  PUBLISH_KAY,
  PUBLISHED_LABEL_MAP,
  TAG_TYPE_MAP,
  TAG_TYPES,
} from "@/types/enum";
import { getTagList, GetTagListDTO, Tag } from "@/modules/tag";
import { TagTypeEnum } from "@prisma/client";
import ActionButton from "./_components/ActionButton";

export default function Page() {
  const router = useRouter();

  const [pageData, setPageData] = useSetState<GetTagListDTO>({
    pageIndex: defaultPageIndex,
    pageSize: defaultPageSize,
  });

  const [searchParams, setSearchParams] = useSetState<
    Omit<GetTagListDTO, "pageIndex" | "pageSize">
  >({
    name: undefined,
    type: undefined,
  });

  const getTagListController = getTagList(pageData);

  const columns: ColumnDef<Tag>[] = [
    {
      accessorKey: "name",
      header: () => (
        <div className="flex items-center space-x-1">
          <TypeIcon className="size-4" />
          <span>名称</span>
        </div>
      ),
      cell: ({ row }) => {
        return (
          <div className="flex items-center space-x-2">
            <span className="font-medium">{row.original.name}</span>
          </div>
        );
      },
    },
    {
      accessorKey: "type",
      header: () => (
        <div className="flex items-center space-x-1">
          <TypeIcon className="size-4" />
          <span>类型</span>
        </div>
      ),
      cell({ row }) {
        const originalType = row.original.type;
        const typeLabel = TAG_TYPE_MAP[originalType];

        return <div className="flex items-center space-x-1">{typeLabel}</div>;
      },
    },
    {
      accessorKey: "_count.blogs",
      header: () => (
        <div className="flex items-center space-x-1">
          <Book className="size-4" />
          <span>博客</span>
        </div>
      ),
      cell({ row }) {
        return row.original._count.blogs || "0";
      },
    },
    {
      id: "actions",
      cell: ({ row }) => {
        const record = row.original;
        return (
          <div className="flex items-center gap-2">
            <ActionButton
              id={record.id}
              refreshAsync={getTagListController.refreshAsync}
            />
            {/* <DeleteTagButton
              id={record.id}
              refreshAsync={getTagsQuery.refreshAsync}
            /> */}
          </div>
        );
      },
    },
  ];

  const handleGoToCreate = () => {
    router.push("/admin/blog/handle/create");
  };

  const handleSearch = () => {
    setPageData({
      name: searchParams.name,
      type: searchParams.type,
    });
  };

  const handleReset = () => {
    setSearchParams({
      name: undefined,
      type: undefined,
    });
    setPageData({
      name: undefined,
      type: undefined,
      pageIndex: defaultPageIndex,
    });
  };

  return (
    <div className="flex flex-col gap-y-6 p-6 h-full w-full">
      <div className="flex flex-wrap justify-between gap-4 px-1">
        <div className="flex gap-x-2">
          <Input
            placeholder="请输入名称"
            value={searchParams.name}
            onChange={(v) => {
              setSearchParams({
                name: v.target.value,
              });
            }}
            onKeyUp={(e) => {
              if (e.key === "Enter") {
                handleSearch();
              }
            }}
          />

          <Select
            onValueChange={(v: TagTypeEnum) => {
              setSearchParams({
                type: v,
              });
            }}
            value={searchParams.type}
          >
            <SelectTrigger
              className={cn({
                "text-muted-foreground": isUndefined(searchParams.type),
              })}
            >
              <SelectValue placeholder="请选择类型" />
            </SelectTrigger>
            <SelectContent>
              {TAG_TYPES.map((el) => (
                <SelectItem key={el} value={el}>
                  {TAG_TYPE_MAP[el]}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="flex items-center space-x-4">
          <Button onClick={handleSearch}>
            <Search className="mr-2 size-4" />
            搜索
          </Button>
          <Button onClick={handleReset}>
            <RotateCw className="mr-2 size-4" />
            重置
          </Button>
          <ActionButton refreshAsync={getTagListController.refreshAsync} />
        </div>
      </div>

      <DataTable
        columns={columns}
        data={getTagListController.data?.tags || []}
        pageData={pageData}
        setPageData={setPageData}
        total={getTagListController.data?.total || 0}
        loading={getTagListController.loading}
      />
    </div>
  );
}
